<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Deliccio Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<script src="/static/js/ajax.js"></script>
<link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="/static/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script src="/static/js/jquery-1.11.1.min.js"></script>
<!-- //js -->
<link href='https://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:600,600italic,700,400' rel='stylesheet' type='text/css'>
<!-- FlexSlider -->
<link rel="stylesheet" href="/static/css/flexslider.css" type="text/css" media="screen" />
<script defer src="/static/js/jquery.flexslider.js"></script>
<script type="text/javascript">
						$(window).load(function(){
						  $('.flexslider').flexslider({
							animation: "slide",
							start: function(slider){
							  $('body').removeClass('loading');
							}
						  });
						});
					  </script>
<!-- //FlexSlider -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
	<body>
	<div class="banner">
		<div class="container">
			<div class="header-nav">
				<nav class="navbar navbar-default">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
					  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					  </button>
						<div class="logo">
							<a class="navbar-brand" href="index.html">Deliccio <span>Healthy And Tasty Food</span></a>
						</div>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					 <ul class="nav navbar-nav">
						<li><a href="{:url('index/index')}">首页</a></li>
						<li><a href="typo">饮食小常识</a></li>
						<li><a href="{:url('index/menu')}">美食菜单</a></li>
						<li><a href="contact">饭后消遣</a></li>
						<li class="active"><a href="{:url('user/register')}">注册</a></li>
						<li><a href="{:url('user/login')}">登录</a></li>
					  </ul>
					</div><!-- /.navbar-collapse -->
				</nav>
			</div>
			<div class="banner-info">
				<div class="col-md-6 banner-info-left">
				<br />
					<h1>我的梦想是住在食家庄，<br />日日食全食美，<br />夜夜碟碟不休。</h1>
					
				</div>
				<div class="col-md-6 banner-info-right">
					<div class="sap_tabs">	
						<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
							<ul class="resp-tabs-list">
							  <li class="resp-tab-item grid2" aria-controls="tab_item-1" role="tab"><span>注册</span></li>
							  <div class="clear"></div>
							</ul>				  	 
							<div class="resp-tabs-container">
								
								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
									<div class="facts">
										<div class="sign-in-form">
											<div class="in-form Personal">
												<form action="reg" method="post" onsubmit="return check()">
													用户名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="name" name="username" class="textbox" value="昵称/QQ号码" /><br />
													<span id="usertip" style="font-size:12px;"></span><br />
													邮&nbsp;&nbsp;箱 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="email" name="email" class="textbox" value="输入你的Email" ><br />
													<span id="emailtip" style="font-size:12px;"></span><br />
												   密&nbsp;&nbsp;码 :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="pass" name="password" class="password" value="" ><br />
												   <span id="passtip" style="font-size:12px;"></span><br />
												   重复密码: <input type="password" id="repass" class="password" value="" ><br /><br />
												   电话号码：<input type="text" name="number" value="" id="num" /><br ><span id="dhtip" style="font-size:12px;"></span><br />
												   验证码:&nbsp;&nbsp;<img id="verify_img" src="{:captcha_src()}" alt="验证码" onclick="refreshVerify()">
													<a href="javascript:refreshVerify()" style='font-size:13px;'>看不清</a>&nbsp;<input type="text" style="width:100px;" name="code" id="yz" value="" ><br />
													<span id="yztip" style="font-size:12px;"></span><br />
													&nbsp;&nbsp;<input type="text" id="dx" name="dx" value="" style="width:120px;" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="hq" >获取短信验证码</a><br />
													<span id="numtip" style="font-size:12px;"></span><br />
													<input id="reg" type="submit" value="提交">
													
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
						<script src="/static/js/easyResponsiveTabs.js" type="text/javascript"></script>
							<script type="text/javascript">
								$(document).ready(function () {
									$('#horizontalTab').easyResponsiveTabs({
										type: 'default', //Types: default, vertical, accordion           
										width: 'auto', //auto or any width like 600px
										fit: true   // 100% fit in a container
									});
								});
							</script>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //banner -->
	</body>
	</html>
	<script>
		function refreshVerify() {
			var ts = Date.parse(new Date())/1000;
			$('#verify_img').attr("src", "/captcha?id="+ts);
		}
		$('#name').focus(function () {
			//console.log(111);
			this.value = '';
		});
		$('#name').blur(function () {
			var str = this.value;
			if (str.length < 3) {
				$('#usertip').html('用户名长度不低于3位');
				$('#usertip').css('color','red');
				this.focus();
				return ;
			} else {
				$('#usertip').html('');
				$('#name').attr('value',str);
			}
			ajax ({
				'type':'post',
				'url':'doreg',
				'data':{username:this.value},
				'async':true,
				'success':success,
			});
		});
		function success (data) {
		//console.log(data);
		data = JSON.parse(data);
		//console.log(data);
		if (data.status ==1) {
			$('#usertip').html('该用户名已注册');
			$('#usertip').css('color','red');
		} else {
			$('#usertip').html('该用户名合法，可以注册');
			$('#usertip').css('color','green');
		}
	}
		//判断邮箱
		$('#email').focus(function () {
			//console.log(111);
			this.value = '';
			//console.log($('#name').attr('value'));
			if ($('#name').attr('value') == '昵称/QQ号码') {
				$('#usertip').html('请先填写用户名');
				$('#usertip').css('color','red');
			}
		});
		
		$('#email').blur(function () {
			var str = this.value;
			pattern = /\w+@\w+\.(com|cn)/;
			if (str == '') {
				$('#emailtip').html('邮箱不能为空');
				check = false;
			} else if (!str.match(pattern)) {
				$('#emailtip').html('邮箱格式不正确');
				$('#emailtip').css('color','red');
				this.focus();
				return ;
			} else {
				$('#emailtip').html('');
				$('#email').attr('value',str);
			}
			$('#emailtip').css('color','red');
		});
		//判断密码
		$('#pass').focus(function () {
			if ($('#name').attr('value') == '昵称/QQ号码') {
				$('#usertip').html('请先填写用户名');
				$('#usertip').css('color','red');
			}
			if ($('#email').attr('value') == '输入你的Email') {
				$('#emailtip').html('请先填写邮箱');
				$('#emailtip').css('color','red');
			}
		});
		$('#pass').blur(function () {
			var str = this.value;
				pattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,12}$/;
			if (str == '') {
				$('#passtip').html('请填写密码');
			} else if (!str.match(pattern)) {
				$('#passtip').html('密码应由3-12位的字母和数字组成');
				$('#passtip').css('color','red');
				this.foucs();
				return ;
			} else {
				$('#passtip').html('');
				$('#pass').attr('value',str);
			}
			$('#passtip').css('color','red');
			});
		$('#repass').blur(function () {
			var pass = $('#pass').attr('value');
			var str = this.value;
			if (pass != str) {
				$('#passtip').html('两次密码不一致');
				$('#passtip').css('color','red');
				this.focus();
				return ;
			} else {
				$('#passtip').html('');
			}
		});
		//手机格式
		$('#num').blur(function () {
			var str = this.value;
			pattern = /^0?(13|14|15|17|18)[0-9]{9}$/;
			if (!str.match(pattern)) {
				$('#dhtip').html('手机格式不正确');
				$('#dhtip').css('color','red');
				this.focus();
				return ;
			} else {
				$('#passtip').html('');
			}
			ajax ({
				'type':'post',
				'url':'checkphone',
				'data':{phone:this.value},
				'async':true,
				'success':success4,
			});
			function success4 (data) 
			{
				//console.log(data);
				data = JSON.parse(data);
				
				if (data.status ==11) {
					$('#dhtip').html('该手机号已注册');
					$('#dhtip').css('color','red');
				} else {
					$('#dhtip').html('该手机号未注册，可以继续注册');
					$('#dhtip').css('color','green');
				}
			}
		})
		//验证验证码
		$('#yz').blur(function () {
		//console.log('2222');
		console.log($.trim($("input[name=code]").val()));
			ajax({
                'url':'checkcode',
                'type':'post',
                'data':{code:$.trim($("input[name=code]").val())},
                'async':true,
                'success':success2
		});
		function success2 (result) {
			result = JSON.parse(result);
			console.log(result);
			if(result.status == 3) {
				$('#yztip').html('验证成功');
				$('#yztip').css('color','green');
			} else {
				$('#yztip').html('验证失败');
				$('#yztip').css('color','red');
			}
		}
	});
	//短信验证
	$('#hq').click(function () {
	//console.log(222);
		//console.log($.trim($("input[name=number]").val()));
		ajax({
                'url':'checknum',
                'type':'post',
                'data':{num:$.trim($("input[name=number]").val())},
                'async':true,
                'success':success3
		});
		function success3 (result) {
			result = JSON.parse(result);
			//console.log(result);
			$('#dx').blur(function () {
				if (result.code == $.trim($("input[name=dx]").val())) {
					$('#numtip').html('验证成功');
					$('#numtip').css('color','green');
				} else {
					$('#numtip').html('验证失败');
					$('#numtip').css('color','red');
				}
			});
		}
	});
	</script>